/*
 * Description: 聊天记录条目
 * Author: wangyifei
 * DateCreated: 2024-06-07 09:10
 */

import { useState } from 'react';
import { Avatar, Divider, Image, Modal } from 'antd';
import { ShowMessageStyle } from './style';
import { userInfo, serverURL, MsgFmt } from '../../config';
import { formatChatContentTime } from '../../utils/time';
import videoPlay from '../../assets/video_play.png';
import { byteConvert, downloadFile, getFileIcons } from '../../utils';
import type { RecordsRes } from '../../http/chatting-records';

interface ShowMessageProps {
	showTime: boolean;
	showName: boolean;
	message: RecordsRes;
}
const ShowMessage = (props: ShowMessageProps) => {
	const { showTime, message } = props;

	return (
		<ShowMessageStyle>
			{showTime && (
				<div className="chat_notice">
					<span>{formatChatContentTime(message.createdTime)}</span>
				</div>
			)}
			{message.msgType === 1 ? (
				<div className="system_msg">
					<Divider plain>{message.msg}</Divider>
				</div>
			) : message.senderId === userInfo.id ? (
				<div className="content self">
					<ChatContent type={message.msgFmt} content={message.msg} />
					<Avatar className="record_avatar" shape="square" src={serverURL + message.senderAvatar} />
				</div>
			) : (
				<div className="content other">
					<Avatar className="record_avatar" shape="square" src={serverURL + message.senderAvatar} />
					<div className="other_content">
						{/* {showName && <div className="other_name">{message.senderName}</div>} */}
						<div className="other_name">{message.senderName}</div>
						<ChatContent type={message.msgFmt} content={message.msg} />
					</div>
				</div>
			)}
		</ShowMessageStyle>
	);
};

// 消息内容 (分为文本、图片、视频和文件)
interface ChatContentProps {
	type: MsgFmt;
	content: string;
}
const ChatContent = (props: ChatContentProps) => {
	const { type, content } = props;
	const [isVideoPlay, setIsVideoPlay] = useState(false);

	switch (type) {
		case MsgFmt.txt:
			return <div className="content_text">{content}</div>;
		case MsgFmt.image:
			return content && <Image rootClassName="content_image" src={serverURL + content} />;
		case MsgFmt.video:
			return (
				content && (
					<div className="content_video">
						<video className="video" src={serverURL + content} />
						<img
							className="video_play"
							src={videoPlay}
							alt="播放"
							onClick={() => setIsVideoPlay(true)}
						/>
						<Modal
							destroyOnClose
							centered
							maskClosable={false}
							footer={false}
							keyboard={false}
							open={isVideoPlay}
							title="视频"
							onCancel={() => setIsVideoPlay(false)}
							width={800}
						>
							<video width={750} height={500} src={serverURL + content} muted controls autoPlay />
						</Modal>
					</div>
				)
			);
		case MsgFmt.file: {
			if (!content) return;
			const fileInfo = JSON.parse(content);
			return (
				fileInfo.url &&
				fileInfo.size && (
					<div
						className="content_file"
						onClick={() => downloadFile(`${serverURL}${fileInfo.url}`, fileInfo.name)}
					>
						<div className="file_info">
							<div className="file_name" title={fileInfo.name}>
								{fileInfo.name}
							</div>
							<div className="file_size">{byteConvert(fileInfo.size)}</div>
						</div>
						<img
							className="file_icon"
							alt="icon"
							src={getFileIcons(fileInfo.url)}
							draggable="false"
						></img>
					</div>
				)
			);
		}
		default:
			return <div className="content_text">[ 格式暂不支持 ]</div>;
	}
};

export default ShowMessage;
